<template>
<div v-loading="loading">
    <div v-for="(extra,index) in extras" :key="extra.wid" :class="{gap: index > 0}">
        <el-row type="flex">
            <el-col>
                <div class="question-gap">
                    <span class="question-title">
                        附加信息{{index + 1}}: 
                        <span>{{ extra.title }}</span>
                        <span style="color: #EC5C2F;">(必填)</span>
                    </span>
                </div>
                <div class="question-gap">
                    <span class="question-description">{{ extra.description }}</span>
                </div>
                <div class="question-gap answer" v-if="form.length > 0">
                    <el-radio-group v-model="form[index].answer">
                        <el-radio  v-for="(option,i) in extra.extraFieldItems" :key="i.wid" :label="option.content">
                            <span style="question-answer">{{ option.content }}</span>
                        </el-radio>
                    </el-radio-group>
                </div>
            </el-col>
        </el-row>
    </div>
    <el-button @click="addQuestionAnswer" >保存</el-button>
    <el-button @click="dialogClose">取 消</el-button>
</div>
</template>

<script>
import { addQuestionAnswer, myQuestionInfo, signByAssignWind} from '@/api/user'

export default {
components: {},
props: { extras:{}},
data() {
return {
    form: [],
    loading: false,
};
},
computed: {},
watch: {},
methods: {
    //关闭dialog对话框
    dialogClose(){
        this.$emit('dialogVisible');
    },
    getMyQuestionInfo(){
        // 获取自己的历史问题及答案，回显到表单中
        myQuestionInfo()
        .then((result) => {
            console.log(result)
            if(result.length === 0){
                return;
            }
            this.form.forEach((currentQuestion,i) => {

                result.forEach((resultQuestion) => {
                    if(resultQuestion.question === currentQuestion.question){
                        this.form[i].answer = resultQuestion.answer;
                    }
                })

            })
        }).catch((err) => {
            this.$message.error(err.message);
        });
    },
    //声明对象，提交这个对象数组到服务器保存数据
    questionAndAnswer(question,answer){
        this.question = question;
        this.answer = answer;
    },
    //提交到服务器
    addQuestionAnswer(){
        for (let i = 0; i < this.form.length; i++) {
            if (this.form[i].answer === undefined) {
                this.$tips("缺少选项","error")
                return;
            }
        }
        addQuestionAnswer(this.form)
        .then((result) => {
            setTimeout(() => {
                this.$tips("保存成功","success");
            }, 1);

            this.form.forEach((question) => {
                question.answer = undefined;
            })

            //延时效果更明显
            setTimeout(() => {
            //回显一下，看看是否成功
            this.getMyQuestionInfo();
            }, 100);

            this.signWindow();

        }).catch((err) => {
            this.$tips(err.message,"error");
        });
    },
    //提示框询问是否打卡
    signWindow(){
        this.$confirm('现在就打卡🐎?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.loading = true;
            signByAssignWind(this.$store.state.user.wind)
            .then((result) => {
                //code: "2210010000"
                // datas: null
                // message: "任务未开始，扫码签到无效！"
                //可能出现的情况
                this.loading = false;
                if(result.data !== undefined && result.data.code === '2210010000'){
                    this.$tips(result.data.msg,"error");
                }else{
                    this.$tips(`签到成功!`,"success");
                }
                
            }).catch((err) => {
                this.loading = false;
                this.$tips(err.message,"error");
            });

        }).catch(()=>{});
    }
},
created() {
    this.extras.forEach((element,index) => {
        this.form.push(new this.questionAndAnswer(element.title))
    });
    this.getMyQuestionInfo();

    this.$bus.$on('',)
},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {
}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {
}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.question-gap{
    margin: 5px 0 5px 0;
}
.gap{
    margin-top: 5px;
}
.answer{
    font-size: 15px;
}
.question-title{
    color: #4B4F5D;
}
.question-description{
    color: #ADB3BE;
}
.question-answer{
    color: #67707E;
}
</style>